<!-- 股票认购管理 / IPO申购列表 -->
<template>
    <div class="pageListBox">
        <div class="cardAdmin">
            <div class="formNewAdmin" v-if="formshow">
                <div class="formSearch">
                    <span class="namename">股票名称</span>
                    <el-input size="mini" style="flex: 3" v-model="form.keyword"></el-input>
                </div>
                <div class="formSearch">
                    <span class="namename">状态</span>
                    <el-select size="mini" style="flex: 3" v-model="form.status" placeholder="请选择状态">
                        <el-option label="未开始" value="not_started"></el-option>
                        <el-option label="进行中" value="in_progress"></el-option>
                        <el-option label="已结束" value="ended"></el-option>
                    </el-select>
                </div>
                <div class="souSuoYouCe">
                    <el-button icon="el-icon-refresh" size="mini" class="white-button" @click="resetForm()">重置</el-button>
                    <el-button class="black-button" icon="el-icon-search" size="mini"
                        @click="get_data('btn')">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="btnBoxList">
            <div class="btns">
                <el-button class="green-button" size="mini" icon="el-icon-plus" plain @click="addbtn()">Add</el-button>
                <el-button class="black-button" size="mini" icon="el-icon-refresh" plain
                    @click="get_data()">刷新表格</el-button>
            </div>
            <div class="formbtns">
                <div style="max-width: 200px;height: 100%;;background-color: #f4f4f4;display: flex;">
                    <div class="qweqweasdasd">
                        <el-dropdown trigger="click" placement="bottom">

                            <div class="btnList22">
                                <i class="el-icon-s-grid"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="col in allColumns" :key="col.prop">
                                    <el-checkbox v-model="selectedColumns" :label="col.prop">
                                        {{ col.label }}
                                    </el-checkbox>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi1">
                        <el-dropdown @command="exportTable" class="popo1cli" trigger="click" placement="bottom">
                            <span class="el-dropdown-link">
                                <i style="font-size: 18px;" class="el-icon-download"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="json">JSON</el-dropdown-item>
                                <el-dropdown-item command="xml">XML</el-dropdown-item>
                                <el-dropdown-item command="csv">CSV</el-dropdown-item>
                                <el-dropdown-item command="txt">TXT</el-dropdown-item>
                                <el-dropdown-item command="word">Word</el-dropdown-item>
                                <el-dropdown-item command="excel">Excel</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi2">
                        <i style="font-size: 18px;cursor: pointer;" class=" el-icon-search" @click="showform"></i>

                    </div>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <el-table v-table-resize border highlight-current-row :data="tableData" cell-class-name="rowlist" class="x1919" ref="tableRef"
            size="mini" v-loading="table_loading">
            <el-table-column prop="id" fixed="left"  label="ID" align="center" min-width="80px" />
            <el-table-column prop="stock_name" label="股票名称" align="center" min-width="200px" show-overflow-tooltip />
            <el-table-column prop="symbol" label="股票代码" align="center" min-width="100px" />
            <el-table-column prop="trading_platform" label="交易所" align="center" min-width="100px" />
            <el-table-column prop="stock_logo" label="股票LOGO" align="center" min-width="100px">

                <template slot-scope="scope">
                    <el-image style="height: 22px" :src="url + scope.row.stock_logo"
                        :preview-src-list="[url + scope.row.stock_logo]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" min-width="120px" />
            <el-table-column prop="white_list" label="白名单" align="center" min-width="100px">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.white_list == 1">是</el-tag>
                    <el-tag v-else type="info">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="issuance_price" label="发行价" align="center" min-width="100px" />
            <el-table-column prop="listing_price" label="上市价" align="center" min-width="100px" />
            <el-table-column prop="issuance_market_value" label="发行市值" align="center" min-width="120px" />
            <el-table-column prop="allotment_ratio" label="配售比例" align="center" min-width="80px" />
            <el-table-column prop="fee_rate" label="手续费率" align="center" min-width="80px" />
            <el-table-column prop="min_subscribe_qty" label="最小申购数量" align="center" min-width="100px" />
            <el-table-column prop="max_subscribe_qty" label="最大申购数量" align="center" min-width="100px" />
            <el-table-column prop="max_subscribe_times" label="最大申购次数" align="center" min-width="100px" />
            <el-table-column prop="subscribe_price" label="申购价格" align="center" min-width="100px" />
            <el-table-column prop="subscribe_progress" label="申购进度" align="center" min-width="100px" />
            <el-table-column prop="price_change_pct" label="涨跌幅" align="center" min-width="100px" />
            <el-table-column prop="sum" label="总数" align="center" min-width="100px" />


            <el-table-column v-for="col in visibleColumns" :key="col.prop" :prop="col.prop" :label="col.label"
                align="center" :min-width="col.width">
            </el-table-column>
            <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="tableEditing(scope.row)" class="green-button" icon="el-icon-edit" type="info" plain
                        size="mini"></el-button>
                    <el-button @click="del_data(scope.row.id)" class="red-button" type="info" plain size="mini"
                        v-if="scope.row.name !== 'admin'" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="fenye11">
            <div style="display: flex;align-items: center;">{{ `当前第 ${currentPage} 页，每页 ${pagesize} 条记录` }}</div>
            <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
                @current-change="current_change"></el-pagination>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-dialog-drag :close-on-click-modal="false" title="新增" top="35px" :visible.sync="dialogVisibleAdd"
            :before-close="beforeClose">
            <el-form :model="formAdd" :rules="rulesAdd" ref="formAdd" class="demo-formAdd">
                <el-form-item label="Logo" class="uploaditem-userlist">
                    <el-upload ref="uploaderpt" class="avatar-uploader-userlist" :on-change="handleFileChangept"
                        action="javascript:void(0)" :auto-upload="false" :show-file-list="false"
                        :before-upload="beforeUpload" name="file">
                        <img v-if="imageUrlLogo.local" :src="imageUrlLogo.local" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select size="mini" v-model="formAdd.status" placeholder="请选择状态">
                        <el-option label="未开始" value="not_started"></el-option>
                        <el-option label="进行中" value="in_progress"></el-option>
                        <el-option label="已结束" value="ended"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="白名单" prop="white_list">
                    <el-radio-group v-model="formAdd.white_list">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="股票名称" prop="stock_name">
                    <el-input size="mini" v-model="formAdd.stock_name"></el-input>
                </el-form-item>
                <el-form-item label="股票代码(字母)" prop="symbol">
                    <el-input size="mini" v-model="formAdd.symbol"></el-input>
                </el-form-item>
                <el-form-item label="交易平台" prop="trading_platform">
                    <el-input size="mini" v-model="formAdd.trading_platform"></el-input>
                </el-form-item>
                <el-form-item label="发行市值" prop="issuance_market_value">
                    <el-input size="mini" v-model="formAdd.issuance_market_value"></el-input>
                </el-form-item>
                <el-form-item label="发行价格" prop="issuance_price">
                    <el-input size="mini" v-model="formAdd.issuance_price"></el-input>
                </el-form-item>


                <el-form-item label="申购价格" prop="subscribe_price">
                    <el-input size="mini" v-model="formAdd.subscribe_price"></el-input>
                </el-form-item>
                <el-form-item label="手续费率(%)" prop="fee_rate">
                    <el-input size="mini" v-model="formAdd.fee_rate"></el-input>
                </el-form-item>
                <el-form-item label="配售比例" prop="allotment_ratio">
                    <el-input size="mini" v-model="formAdd.allotment_ratio"></el-input>
                </el-form-item>
                <el-form-item label="最小申购数量" prop="min_subscribe_qty">
                    <el-input size="mini" type="number" v-model="formAdd.min_subscribe_qty"></el-input>
                </el-form-item>
                <el-form-item label="最大申购数量" prop="max_subscribe_qty">
                    <el-input size="mini" type="number" v-model="formAdd.max_subscribe_qty"></el-input>
                </el-form-item>
                <el-form-item label="最大申购次数" prop="max_subscribe_times">
                    <el-input size="mini" v-model="formAdd.max_subscribe_times"></el-input>
                </el-form-item>
                <el-form-item label="申购进度" prop="subscribe_progress">
                    <el-input size="mini" v-model="formAdd.subscribe_progress"></el-input>
                </el-form-item>
                <el-form-item label="认购开始日期" prop="subscribe_start_date">
                    <el-date-picker size="mini" v-model="formAdd.subscribe_start_date" type="date" placeholder="选择认购开始日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="认购结束日期" prop="subscribe_end_date">
                    <el-date-picker size="mini" v-model="formAdd.subscribe_end_date" type="date" placeholder="选择认购结束日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="抽签日期" prop="lottery_date">
                    <el-date-picker size="mini" v-model="formAdd.lottery_date" type="date" placeholder="选择抽签日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="上市时间" prop="listing_date">
                    <el-date-picker size="mini" v-model="formAdd.listing_date" type="date" placeholder="选择上市时间"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="上市价格" prop="listing_price">
                    <el-input size="mini" v-model="formAdd.listing_price"></el-input>
                </el-form-item>
            </el-form>

            <template slot="footer">
                <div class="fbtns">
                    <el-button class="purple-button" size="mini" @click="add_data" :loading="btnAdd" plain>确认新增</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-dialog-drag :close-on-click-modal="false" top="35px" title="更新" :visible.sync="dialogVisibleEdit"
            v-loading="dialogVisibleEditLoading" :before-close="beforeClose">
            <el-form :model="formEdit" :rules="rulesEdit" ref="formEdit" class="demo-formEdit">

                <el-form-item label="Logo" class="uploaditem-userlist">
                    <el-upload ref="uploaderpt" class="avatar-uploader-userlist" :on-change="handleFileChangept"
                        action="javascript:void(0)" :auto-upload="false" :show-file-list="false"
                        :before-upload="beforeUpload" name="file">
                        <img v-if="imageUrlLogo.local" :src="imageUrlLogo.local" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select size="mini" v-model="formEdit.status" placeholder="请选择状态">
                        <el-option label="未开始" value="not_started"></el-option>
                        <el-option label="进行中" value="in_progress"></el-option>
                        <el-option label="已结束" value="ended"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="白名单">
                    <el-radio-group v-model="formEdit.white_list">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="股票名称" prop="stock_name">
                    <el-input size="mini" v-model="formEdit.stock_name"></el-input>
                </el-form-item>
                <el-form-item label="股票代码(字母)" prop="symbol">
                    <el-input size="mini" v-model="formEdit.symbol"></el-input>
                </el-form-item>
                <el-form-item label="交易平台" prop="trading_platform">
                    <el-input size="mini" v-model="formEdit.trading_platform"></el-input>
                </el-form-item>
                <el-form-item label="发行市值" prop="issuance_market_value">
                    <el-input size="mini" v-model="formEdit.issuance_market_value"></el-input>
                </el-form-item>
                <el-form-item label="发行价格" prop="issuance_price">
                    <el-input size="mini" v-model="formEdit.issuance_price"></el-input>
                </el-form-item>


                <el-form-item label="申购价格" prop="subscribe_price">
                    <el-input size="mini" v-model="formEdit.subscribe_price"></el-input>
                </el-form-item>
                <el-form-item label="手续费率(%)" prop="fee_rate">
                    <el-input size="mini" v-model="formEdit.fee_rate"></el-input>
                </el-form-item>
                <el-form-item label="配售比例" prop="allotment_ratio">
                    <el-input size="mini" v-model="formEdit.allotment_ratio"></el-input>
                </el-form-item>
                <el-form-item label="最小申购数量" prop="min_subscribe_qty">
                    <el-input size="mini" type="number" v-model="formEdit.min_subscribe_qty"></el-input>
                </el-form-item>
                <el-form-item label="最大申购数量" prop="max_subscribe_qty">
                    <el-input size="mini" type="number" v-model="formEdit.max_subscribe_qty"></el-input>
                </el-form-item>
                <el-form-item label="最大申购次数" prop="max_subscribe_times">
                    <el-input size="mini" v-model="formEdit.max_subscribe_times"></el-input>
                </el-form-item>
                <el-form-item label="申购进度" prop="subscribe_progress">
                    <el-input size="mini" v-model="formEdit.subscribe_progress"></el-input>
                </el-form-item>
                <el-form-item label="认购开始日期" prop="subscribe_start_date">
                    <el-date-picker size="mini" v-model="formEdit.subscribe_start_date" type="date" placeholder="选择认购开始日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="认购结束日期" prop="subscribe_end_date">
                    <el-date-picker size="mini" v-model="formEdit.subscribe_end_date" type="date" placeholder="选择认购结束日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="抽签日期" prop="lottery_date">
                    <el-date-picker size="mini" v-model="formEdit.lottery_date" type="date" placeholder="选择抽签日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="上市时间" prop="listing_date">
                    <el-date-picker size="mini" v-model="formEdit.listing_date" type="date" placeholder="选择上市时间"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="上市价格" prop="listing_price">
                    <el-input size="mini" v-model="formEdit.listing_price"></el-input>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <div class="fbtns">
                    <el-button class="black-button" size="mini" plain @click="upd_data" :loading="btnEdit">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    ipo_stock_list,
    ipo_stock_add,
    ipo_stock_edit,
    ipo_stock_delete,
    url
} from "@/utils/api";
export default {
    name: "IPOpurchase",

    data() {
        return {
            url,
            table_loading: true,
            dialogVisibleEditLoading: false,
            dialogVisibleEdit: false,
            btnAdd: false,
            btnEdit: false,
            formshow: false,
            // 下拉框选中的列（存储 prop 值）
            selectedColumns: ['name'], // 默认选中姓名和日期

            // 所有可选的列配置
            allColumns: [
                { prop: 'weight', label: '权重', width: 80 },
                { prop: 'subscribe_start_date', label: '申购开始时间', width: 110 },
                { prop: 'subscribe_end_date', label: '申购截止时间', width: 110 },
                { prop: 'listing_date', label: '上市时间', width: 110 },
                { prop: 'lottery_date', label: '摇号时间', width: 110 },
                { prop: 'add_time', label: '创建时间', width: 160 },

            ],
            pagesize: 15,
            total: 0,
            formAdd: {
                white_list: 0,
                stock_name: '',
                symbol: '',
                trading_platform: '',
                issuance_market_value: '',
                issuance_price: '',
                subscribe_price: '',
                fee_rate: '',
                allotment_ratio: '',
                min_subscribe_qty: '',
                max_subscribe_qty: '',
                max_subscribe_times: '',
                subscribe_progress: '',
                subscribe_start_date: '',
                subscribe_end_date: '',
                lottery_date: '',
                listing_date: '',

                listing_price: '',
                status: '',

            },
            formEdit: {
                id: '',
                white_list: 0,
                stock_name: '',
                symbol: '',
                trading_platform: '',
                issuance_market_value: '',
                issuance_price: '',
                subscribe_price: '',
                fee_rate: '',
                allotment_ratio: '',
                min_subscribe_qty: '',
                max_subscribe_qty: '',
                max_subscribe_times: '',
                subscribe_progress: '',
                subscribe_start_date: '',
                subscribe_end_date: '',
                lottery_date: '',
                listing_price: '',
                status: '',
                listing_date: '',
            },
            form: {
                keyword: "",
                status: "",
            },
            tableData: [
                { id: 1, date: '2023-01-01', group_name: '张三', status: '北京', permissions: '13800138000', name: 'name' },
                { id: 2, date: '2023-01-02', group_name: '李四', status: '上海', permissions: '13900139000', name: 'name' },
            ],
            dialogVisibleAdd: false,
            titles: "",
            name: "",
            nametype: "编辑",
            currentPage: 1,
            rulesEdit: {
                white_list: [
                    { required: true, message: "请选择白名单状态", trigger: "blur" },
                ],
                stock_name: [
                    { required: true, message: "请输入股票名称", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                trading_platform: [
                    { required: true, message: "请输入交易平台", trigger: "blur" },
                ],
                issuance_market_value: [
                    { required: true, message: "请输入发行市值", trigger: "blur" },
                ],
                issuance_price: [
                    { required: true, message: "请输入发行价格", trigger: "blur" },
                ],
                subscribe_price: [
                    { required: true, message: "请输入认购价格", trigger: "blur" },
                ],
                fee_rate: [
                    { required: true, message: "请输入手续费率", trigger: "blur" },
                ],
                allotment_ratio: [
                    { required: true, message: "请输入配售比例", trigger: "blur" },
                ],
                min_subscribe_qty: [
                    { required: true, message: "请输入最小认购数量", trigger: "blur" },
                ],
                max_subscribe_qty: [
                    { required: true, message: "请输入最大认购数量", trigger: "blur" },
                ],
                max_subscribe_times: [
                    { required: true, message: "请输入最大认购次数", trigger: "blur" },
                ],
                subscribe_progress: [
                    { required: true, message: "请输入认购进度", trigger: "blur" },
                ],
                subscribe_start_date: [
                    { required: true, message: "请选择认购开始日期", trigger: "change" },
                ],
                subscribe_end_date: [
                    { required: true, message: "请选择认购结束日期", trigger: "change" },
                ],
                lottery_date: [
                    { required: true, message: "请选择摇号日期", trigger: "change" },
                ],
                listing_price: [
                    { required: true, message: "请输入上市价格", trigger: "blur" },
                ],
                status: [
                    { required: true, message: "请选择状态", trigger: "change" },
                ],
                listing_date: [
                    { required: true, message: "请选择上市时间", trigger: "change" },
                ],


            },
            rulesAdd: {
                white_list: [
                    { required: true, message: "请选择白名单状态", trigger: "blur" },
                ],
                stock_name: [
                    { required: true, message: "请输入股票名称", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                trading_platform: [
                    { required: true, message: "请输入交易平台", trigger: "blur" },
                ],
                issuance_market_value: [
                    { required: true, message: "请输入发行市值", trigger: "blur" },
                ],
                issuance_price: [
                    { required: true, message: "请输入发行价格", trigger: "blur" },
                ],
                subscribe_price: [
                    { required: true, message: "请输入认购价格", trigger: "blur" },
                ],
                fee_rate: [
                    { required: true, message: "请输入手续费率", trigger: "blur" },
                ],
                allotment_ratio: [
                    { required: true, message: "请输入配售比例", trigger: "blur" },
                ],
                min_subscribe_qty: [
                    { required: true, message: "请输入最小认购数量", trigger: "blur" },
                ],
                max_subscribe_qty: [
                    { required: true, message: "请输入最大认购数量", trigger: "blur" },
                ],
                max_subscribe_times: [
                    { required: true, message: "请输入最大认购次数", trigger: "blur" },
                ],
                subscribe_progress: [
                    { required: true, message: "请输入认购进度", trigger: "blur" },
                ],
                subscribe_start_date: [
                    { required: true, message: "请选择认购开始日期", trigger: "change" },
                ],
                subscribe_end_date: [
                    { required: true, message: "请选择认购结束日期", trigger: "change" },
                ],
                lottery_date: [
                    { required: true, message: "请选择摇号日期", trigger: "change" },
                ],
                listing_price: [
                    { required: true, message: "请输入上市价格", trigger: "blur" },
                ],
                status: [
                    { required: true, message: "请选择状态", trigger: "change" },
                ],
                listing_date: [
                    { required: true, message: "请选择上市时间", trigger: "change" },
                ],
            },
            imageUrlLogo: {
                local: '',
                file: ''
            },
        };
    },
    computed: {
        userRoleId() {
            const user = JSON.parse(localStorage.getItem("user"));
            return user ? user.role_id : null;
        },
        // 计算实际要显示的列
        visibleColumns() {
            return this.allColumns.filter(col =>
                this.selectedColumns.includes(col.prop)
            )
        }
    },
    watch: {
        // 当选择的列变化时，可以在这里添加额外逻辑
        selectedColumns(newVal) {
            console.log('当前显示的列：', newVal)
        },
    },
    mounted() {
        this.get_data();
    },

    methods: {

        showform() {
            this.formshow = !this.formshow
        },
        get_time() {
            const now = new Date();
            const formatted = now.getFullYear() + '-' +
                String(now.getMonth() + 1).padStart(2, '0') + '-' +
                String(now.getDate()).padStart(2, '0') + ' ' +
                String(now.getHours()).padStart(2, '0') + ':' +
                String(now.getMinutes()).padStart(2, '0') + ':' +
                String(now.getSeconds()).padStart(2, '0');
            return formatted
        },
        // 新增打开
        addbtn() {
            this.dialogVisibleAdd = true;
            this.titles = "新增";
        },
        // 查询
        async get_data(btn) {
            if (btn) this.currentPage = 1
            this.table_loading = true; // 开始加载

            let params = new URLSearchParams();

            params.append('page', this.currentPage);
            params.append('page_size', this.pagesize);

            if (this.form.keyword) params.append('keyword', this.form.keyword);
            if (this.form.status) params.append('status', this.form.status);



            let data = `?${params.toString()}`;

            try {
                const res = await ipo_stock_list(data);
                if (res.data && res.data.code == "200") {


                    this.tableData = res.data.data.data;
                    this.total = res.data.data.total_records;
                } else {
                    this.$message.error(res?.data?.msg || "获取数据失败");
                }
            } catch (err) {
                console.error("获取数据失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.table_loading = false; // 不论成功失败都结束 table_loading
            }
        },
        // 新增
        async add_data() {

            this.btnAdd = true;
            try {
                const valid = await this.$refs.formAdd.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }
                const fields = [
                    'white_list',
                    'stock_name',
                    'symbol',
                    'trading_platform',
                    'issuance_market_value',
                    'issuance_price',
                    'subscribe_price',
                    'fee_rate',
                    'allotment_ratio',
                    'min_subscribe_qty',
                    'max_subscribe_qty',
                    'max_subscribe_times',
                    'subscribe_progress',
                    'subscribe_start_date',
                    'subscribe_end_date',
                    'lottery_date',
                    'listing_price',
                    'status',
                    'listing_date',
                ];

                let data = new FormData();

                for (const key of fields) {
                    const value = this.formAdd[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data.append(key, value);
                    }
                }

                // 添加Logo字段
                if (this.imageUrlLogo.file) {
                    data.append('stock_logo', this.imageUrlLogo.file);
                }

                const res = await ipo_stock_add(data);

                console.log(res, '新增');
                if (res && res.status == "200" && (res.data.code == "200" || res.data.code == "201")) {
                    // this.$message.success(res.data.message);

                    this.$notify({
                        title: `${res.data.message}`,
                        message: `ID:${res.data.id}`,
                        type: 'success',
                        duration: 8000,
                        position: 'bottom-right'
                    });
                    this.get_data();
                    this.dialogVisibleAdd = false;
                } else {
                    this.$message.error(res?.data?.message || "操作失败");
                }
            } catch (err) {
                console.error(err);
                this.$message.error("请求失败，请稍后再试");
            } finally {
                this.btnAdd = false;
            }
        },
        // 更新
        async upd_data() {
            this.btnEdit = true;
            try {
                const valid = await this.$refs.formEdit.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }

                const fields = [
                    'id',
                    'white_list',
                    'stock_name',
                    'symbol',
                    'trading_platform',
                    'issuance_market_value',
                    'issuance_price',
                    'subscribe_price',
                    'fee_rate',
                    'allotment_ratio',
                    'min_subscribe_qty',
                    'max_subscribe_qty',
                    'max_subscribe_times',
                    'subscribe_progress',
                    'subscribe_start_date',
                    'subscribe_end_date',
                    'lottery_date',
                    'listing_price',
                    'status',
                    'listing_date',
                ];
                let id = this.formEdit.id
                let data = new FormData();

                for (const key of fields) {
                    const value = this.formEdit[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data.append(key, value);
                    }
                }

                // 添加Logo字段
                if (this.imageUrlLogo.file) {
                    data.append('stock_logo', this.imageUrlLogo.file);
                }

                const response = await ipo_stock_edit(id, data);

                if (response.data && response.data.code == "200") {
                    this.$message.success(response.data.msg);
                    this.dialogVisibleEdit = false;
                    this.get_data();
                } else {
                    this.$message.warning(response?.data?.msg || "操作失败");
                }
            } catch (err) {
                console.error("更新失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.btnEdit = false;
            }
        },
        // 删除
        async del_data(id) {
            try {
                await this.$confirm("是否继续执行操作？", "提示", {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                });

                const res = await ipo_stock_delete(id).catch((err) => {
                    return console.error(err);
                });

                if (res && res.status == "200" && res.data.code == "200") {
                    this.$message.success(res.data.msg);
                    this.dialogVisibleAdd = false;
                    this.get_data();
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                // 用户点击取消或关闭对话框
                console.error(error);
            }
        },
        async changeSwitch(row) {
            this.btnAdd = true;
            try {


                let data = {};
                data.id = row.id
                data.group_name = row.group_name
                data.status = row.status


                const response = await ipo_stock_edit(data);

                if (response.data && response.data.code == "200") {
                    this.$message.success(response.data.msg);
                    this.dialogVisibleEdit = false;
                    this.get_data();
                } else {
                    this.$message.warning(response?.data?.msg || "操作失败");
                }
            } catch (err) {
                console.error(err);
                this.$message.error("请求失败，请稍后再试");
            } finally {
                this.btnAdd = false;
            }
        },
        // 关闭弹窗
        beforeClose(done) {
            if (document.activeElement) {
                document.activeElement.blur();
            }
            // this.dialogVisibleEdit = false
            // this.dialogVisibleAdd = false
            this.imageUrlLogo.local = ''
            this.imageUrlLogo.file = ''

            this.formAdd = {
                white_list: 0,
                stock_name: '',
                symbol: '',
                trading_platform: '',
                issuance_market_value: '',
                issuance_price: '',
                subscribe_price: '',
                fee_rate: '',
                allotment_ratio: '',
                min_subscribe_qty: '',
                max_subscribe_qty: '',
                max_subscribe_times: '',
                subscribe_progress: '',
                subscribe_start_date: '',
                subscribe_end_date: '',
                lottery_date: '',
                listing_price: '',
                status: '',
                listing_date: '',
            }
            this.formEdit = {
                id: '',
                white_list: 0,
                stock_name: '',
                symbol: '',
                trading_platform: '',
                issuance_market_value: '',
                issuance_price: '',
                subscribe_price: '',
                fee_rate: '',
                allotment_ratio: '',
                min_subscribe_qty: '',
                max_subscribe_qty: '',
                max_subscribe_times: '',
                subscribe_progress: '',
                subscribe_start_date: '',
                subscribe_end_date: '',
                lottery_date: '',
                listing_price: '',
                status: '',
                listing_date: '',
            }
            done();
        },

        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_data();
        },
        // 重置
        resetForm() {
            this.form = {
                keyword: "",
                status: "",
            };
            this.currentPage = 1;
            this.get_data();
        },
        // 编辑打开
        tableEditing(row) {
            this.dialogVisibleEditLoading = true
            this.titles = "编辑";
            this.dialogVisibleEdit = true;

            this.formEdit.id = row.id;
            setTimeout(() => {
                this.dialogVisibleEditLoading = false
            }, 100);
            this.formEdit.white_list = row.white_list;
            this.formEdit.stock_name = row.stock_name;
            this.formEdit.symbol = row.symbol;
            this.formEdit.trading_platform = row.trading_platform;
            this.formEdit.issuance_market_value = row.issuance_market_value;
            this.formEdit.issuance_price = row.issuance_price;
            this.formEdit.subscribe_price = row.subscribe_price;
            this.formEdit.fee_rate = row.fee_rate;
            this.formEdit.allotment_ratio = row.allotment_ratio;
            this.formEdit.min_subscribe_qty = row.min_subscribe_qty;
            this.formEdit.max_subscribe_qty = row.max_subscribe_qty;
            this.formEdit.max_subscribe_times = row.max_subscribe_times;
            this.formEdit.subscribe_progress = row.subscribe_progress;
            this.formEdit.subscribe_start_date = row.subscribe_start_date;
            this.formEdit.subscribe_end_date = row.subscribe_end_date;
            this.formEdit.lottery_date = row.lottery_date;
            this.formEdit.listing_price = row.listing_price;
            this.formEdit.listing_date = row.listing_date;
            this.formEdit.status = row.status;


            if (row.stock_logo) {
                this.imageUrlLogo.file = row.stock_logo;
                this.imageUrlLogo.local = this.url + row.stock_logo;
            }
        },
        exportTable(format) {
            switch (format) {
                case 'json':
                    this.exportJSON();
                    break;
                case 'xml':
                    this.exportXML();
                    break;
                case 'csv':
                    this.exportCSV();
                    break;
                case 'txt':
                    this.exportTXT();
                    break;
                case 'word':
                    this.exportWord();
                    break;
                case 'excel':
                    this.exportExcel();
                    break;
            }
        },
        handleFileChangept(file, fileList) {
            // 验证文件（复用原有验证逻辑）
            if (!this.beforeUpload(file.raw)) {
                this.$refs.uploaderpt.clearFiles(); // 清空非法文件
                return;
            }

            // 获取文件对象
            console.log('获取的文件:', file.raw);

            // 本地预览：生成临时URL
            this.imageUrlLogo.local = URL.createObjectURL(file.raw);

            // 如需保留 file 可自行保存
            this.imageUrlLogo.file = file.raw;
            console.log(this.imageUrlLogo, 'this.imageUrlLogo');
            // 清空内部文件列表（避免重复选择相同文件不触发）
            this.$nextTick(() => {
                this.$refs.uploaderpt.clearFiles();
            });
        },
        beforeUpload(file) {
            console.log(file, 'filefile');
            const isLt7M = file.size / 1024 / 1024 < 7;
            if (!isLt7M) {
                this.$message.error('上传图片大小不能超过 7MB!');
                return false;
            }
            return isLt7M
        },
        exportJSON() {
            const jsonStr = JSON.stringify(this.tableData, null, 2);
            const blob = new Blob([jsonStr], { type: 'application/json' });
            this.downloadBlob(blob, 'table.json');
        },
        exportXML() {
            const xml = `<?xml version="1.0"?>\n<rows>\n` +
                this.tableData.map(item =>
                    `  <row>\n` +
                    `    <id>${item.id}</id>\n` +
                    `    <white_list>${item.white_list}</white_list>\n` +
                    `    <stock_name>${item.stock_name}</stock_name>\n` +
                    `    <symbol>${item.symbol}</symbol>\n` +
                    `    <trading_platform>${item.trading_platform}</trading_platform>\n` +
                    `    <issuance_market_value>${item.issuance_market_value}</issuance_market_value>\n` +
                    `    <issuance_price>${item.issuance_price}</issuance_price>\n` +
                    `    <subscribe_price>${item.subscribe_price}</subscribe_price>\n` +
                    `    <fee_rate>${item.fee_rate}</fee_rate>\n` +
                    `    <allotment_ratio>${item.allotment_ratio}</allotment_ratio>\n` +
                    `    <min_subscribe_qty>${item.min_subscribe_qty}</min_subscribe_qty>\n` +
                    `    <max_subscribe_qty>${item.max_subscribe_qty}</max_subscribe_qty>\n` +
                    `    <max_subscribe_times>${item.max_subscribe_times}</max_subscribe_times>\n` +
                    `    <subscribe_progress>${item.subscribe_progress}</subscribe_progress>\n` +
                    `    <subscribe_start_date>${item.subscribe_start_date}</subscribe_start_date>\n` +
                    `    <subscribe_end_date>${item.subscribe_end_date}</subscribe_end_date>\n` +
                    `    <lottery_date>${item.lottery_date}</lottery_date>\n` +
                    `    <listing_price>${item.listing_price}</listing_price>\n` +
                    `    <status>${item.status}</status>\n` +
                    `    <listing_date>${item.listing_date}</listing_date>\n` +
                    `    <stock_logo>${item.stock_logo}</stock_logo>\n` +
                    `  </row>`
                ).join('\n') +
                `\n</rows>`;
            const blob = new Blob([xml], { type: 'application/xml' });
            this.downloadBlob(blob, 'table.xml');
        },

        exportCSV() {
            const headers = [
                'ID', '白名单', '股票名称', '股票代码',
                '交易平台', '发行市值', '发行价',
                '申购价', '手续费率', '配售比例',
                '最小申购量', '最大申购量',
                '最大申购次数', '申购进度',
                '申购开始日期', '申购结束日期',
                '摇号日期', '上市价', '状态',
                '上市日期', '股票Logo'
            ];
            const rows = this.tableData.map(item => [
                item.id,
                item.white_list,
                item.stock_name,
                item.symbol,
                item.trading_platform,
                item.issuance_market_value,
                item.issuance_price,
                item.subscribe_price,
                item.fee_rate,
                item.allotment_ratio,
                item.min_subscribe_qty,
                item.max_subscribe_qty,
                item.max_subscribe_times,
                item.subscribe_progress,
                item.subscribe_start_date,
                item.subscribe_end_date,
                item.lottery_date,
                item.listing_price,
                item.status,
                item.listing_date,
                item.stock_logo
            ]);
            let content = headers.join(',') + '\n';
            rows.forEach(row => {
                content += row.join(',') + '\n';
            });
            const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
            this.downloadBlob(blob, 'table.csv');
        },

        exportTXT() {
            const headers = [
                'ID', '白名单', '股票名称', '股票代码',
                '交易平台', '发行市值', '发行价',
                '申购价', '手续费率', '配售比例',
                '最小申购量', '最大申购量',
                '最大申购次数', '申购进度',
                '申购开始日期', '申购结束日期',
                '摇号日期', '上市价', '状态',
                '上市日期', '股票Logo'
            ];
            const rows = this.tableData.map(item => [
                item.id,
                item.white_list,
                item.stock_name,
                item.symbol,
                item.trading_platform,
                item.issuance_market_value,
                item.issuance_price,
                item.subscribe_price,
                item.fee_rate,
                item.allotment_ratio,
                item.min_subscribe_qty,
                item.max_subscribe_qty,
                item.max_subscribe_times,
                item.subscribe_progress,
                item.subscribe_start_date,
                item.subscribe_end_date,
                item.lottery_date,
                item.listing_price,
                item.status,
                item.listing_date,
                item.stock_logo
            ]);
            let content = headers.join('\t') + '\n';
            rows.forEach(row => {
                content += row.join('\t') + '\n';
            });
            const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
            this.downloadBlob(blob, 'table.txt');
        },

        async exportWord() {
            const { default: HTMLDocx } = await import('html-docx-js/dist/html-docx');
            const html =
                `<table border="1" cellpadding="5" cellspacing="0"><tr>` +
                `<th>ID</th><th>白名单</th><th>股票名称</th><th>股票代码</th><th>交易平台</th>` +
                `<th>发行市值</th><th>发行价</th><th>申购价</th><th>手续费率</th><th>配售比例</th>` +
                `<th>最小申购量</th><th>最大申购量</th><th>最大申购次数</th><th>申购进度</th>` +
                `<th>申购开始日期</th><th>申购结束日期</th><th>摇号日期</th><th>上市价</th>` +
                `<th>状态</th><th>上市日期</th><th>股票Logo</th>` +
                `</tr>` +
                this.tableData.map(item =>
                    `<tr>` +
                    `<td>${item.id}</td>` +
                    `<td>${item.white_list}</td>` +
                    `<td>${item.stock_name}</td>` +
                    `<td>${item.symbol}</td>` +
                    `<td>${item.trading_platform}</td>` +
                    `<td>${item.issuance_market_value}</td>` +
                    `<td>${item.issuance_price}</td>` +
                    `<td>${item.subscribe_price}</td>` +
                    `<td>${item.fee_rate}</td>` +
                    `<td>${item.allotment_ratio}</td>` +
                    `<td>${item.min_subscribe_qty}</td>` +
                    `<td>${item.max_subscribe_qty}</td>` +
                    `<td>${item.max_subscribe_times}</td>` +
                    `<td>${item.subscribe_progress}</td>` +
                    `<td>${item.subscribe_start_date}</td>` +
                    `<td>${item.subscribe_end_date}</td>` +
                    `<td>${item.lottery_date}</td>` +
                    `<td>${item.listing_price}</td>` +
                    `<td>${item.status}</td>` +
                    `<td>${item.listing_date}</td>` +
                    `<td>${item.stock_logo}</td>` +
                    `</tr>`
                ).join('') +
                `</table>`;
            const blob = HTMLDocx.asBlob(html);
            this.downloadBlob(blob, 'table.docx');
        },
        async exportExcel() {
            const XLSX = await import('xlsx');
            const ws = XLSX.utils.json_to_sheet(this.tableData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
            const blob = new Blob([wbout], { type: 'application/octet-stream' });
            this.downloadBlob(blob, 'table.xlsx');
        },
        downloadBlob(blob, filename) {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
            URL.revokeObjectURL(link.href);
        }
    },
};
</script>
<style>
.rowlist {
    padding: 6px !important;
}

.nbysm {
    flex: 2;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
}

.souSuoYouCe {
    margin: 20px 0 0 auto;
    padding-bottom: 5px;
    padding-right: 10px;
}

.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.namename {
    padding: 0 10px;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.el-textarea {
    overflow: hidden;
    /* 隐藏滚动条 */
}

.pageListBox {
    width: 100%;
    // padding: 10px;
    // background-color: aquamarine;
    height: auto;
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        // border: #fafafa solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;

        .formNewAdmin {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
            padding-bottom: 10px;
            border-bottom: 1px #e3e3e3 solid;
        }

        .formSearch {
            width: 25%;
            min-width: 25%;
            margin-top: 20px;
            height: 30px;
            display: flex;
            justify-content: center;
        }
    }

    .btnBoxList {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;

        .formbtns {
            width: 50%;
            display: flex;
            justify-content: end;
            padding: 5px 10px;

            .qweqweasdasd {
                width: 75px;
                padding: 5px 10px;
                border: 1px #f4f4f4 solid;
            }

            .qweqweasdasd:hover {

                background-color: #e7e7e7;
                border: 1px #ccc solid;
            }


            .btnList22 {
                width: auto;
                height: 28px;
                color: #000;
                min-width: 50px;
                border-radius: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                i {
                    font-size: 18px;
                }
            }

        }

        .btns {
            width: 50%;
            display: flex;
            padding: 5px 10px;



        }


    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;
        justify-content: center;
        padding-right: 15px;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}
</style>
<style>
.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

textarea {
    resize: none !important;
}

/* 子级样式 */
.child-row11 {
    background-color: #fcfcfc !important;
    color: #ff8718;
}

/* 父级样式 */
.parent-row11 {
    background-color: #ffffff;
    color: #000;
    font-weight: 500;
}

.parent-row11 .cell {
    font-size: 13px !important;
}

.el-dropdown-link {
    height: 100%;
    cursor: pointer;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.fenye11 {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 4px 8px;
}



.el-pager li.active {
    background-color: #000 !important;
}

.setFomr {
    display: flex;
    align-items: center;
    padding: 10px 10px 0 10px;
}



.resetForm-button {
    background-color: #ffffff !important;
    border-color: #333 !important;
    color: #333 !important;
    font-size: 13px !important;
}

.resetForm-button:hover {
    background-color: #fff !important;
    border-color: #333 !important;
}
</style>
  